<template>
  <div class="emp-detail">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账户设置" name="first">
          <el-form class="my-form" :model="form" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="save" type="primary">更新</el-button>
              <el-button @click="$router.push('/employees')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
            <user-info />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
            <job-info />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { profileAPI } from '@/api/user'
import { editProfile } from '@/api/employees'
// 导入组件
import UserInfo from './components/UserInfo.vue'
import JobInfo from './components/JobInfo.vue'
export default {
  components: {
    JobInfo,
    UserInfo
  },
  data () {
    return {
      // 双向绑定选中的tab栏
      activeName: 'first',
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    // 更新的点击事件
    async save () {
      await editProfile(this.form)
      // 更新成功就弹出成功提示，并跳转回员工列表页
      this.$message.success('修改成功！')
      this.$router.push('/employees')
    }
  },
  async created () {
    // 页面一打开就加载出了这个员工的所有数据，存到form里了
    const res = await profileAPI(this.$route.params.id)
    this.form = res.data
  }
}
</script>

<style lang="scss" scoped>
.emp-detail {
  padding: 20px;

  .my-form {
    width: 420px;
    margin: 100px auto;
  }
}
</style>
